<template>
  <div class="home">
    <div class="show-card">
      <bc-icon name="bc-loading"></bc-icon>
      <bc-icon name="bc-loading3"></bc-icon>
      <bc-icon name="bc-loading4"></bc-icon>
      <bc-icon name="bc-loading2"></bc-icon>
      <bc-icon name="bc-check"></bc-icon>
      <bc-icon name="bc-close"></bc-icon>
      <bc-icon name="bc-search"></bc-icon>
      <bc-icon name="bc-unfold"></bc-icon>
      <bc-icon name="bc-fold"></bc-icon>
      <bc-icon name="bc-move"></bc-icon>
      <bc-icon name="bc-calendar"></bc-icon>
      <bc-icon name="bc-info"></bc-icon>
      <bc-icon name="bc-left"></bc-icon>
      <bc-icon name="bc-right"></bc-icon>
      <bc-icon name="bc-arrow-right"></bc-icon>
      <bc-icon name="bc-arrow-left"></bc-icon>
      <bc-icon name="bc-arrows-right"></bc-icon>
      <bc-icon name="bc-arrows-left"></bc-icon>
    </div>
    <div class="show-card">
      <bc-button disabled>按钮</bc-button>
      <bc-button @click="toToast"
        size="big">ALERT</bc-button>
      <bc-button>按钮</bc-button>
      <bc-button type="primary">按钮</bc-button>
      <bc-button type="success">按钮</bc-button>
      <bc-button type="warning">按钮</bc-button>
      <bc-button type="error">按钮</bc-button>
      <bc-button icon="bc-loading">按钮</bc-button>
      <bc-button icon="bc-unfold"
        right>按钮</bc-button>
      <bc-button-group>
        <bc-button>我们</bc-button>
        <bc-button>是</bc-button>
        <bc-button>按钮组</bc-button>
      </bc-button-group>
    </div>
    <div class="show-card">
      <bc-input v-model="testInput1"></bc-input>
      <bc-input clear
        v-model="testInput2"></bc-input>
      <bc-input clear
        v-model="testInput3"
        icon="bc-search"></bc-input>
      <bc-input prefix
        clear
        v-model="testInput4"
        icon="bc-search"></bc-input>
    </div>
    <div class="show-card">
      <bc-input-number v-model="testInputNum"
        min="1"
        max="50"></bc-input-number>
      <bc-input v-model="testTextarea1"
        type="textarea"
        :autosize="{ minRows: 2,maxRows:'3'}"></bc-input>
      <bc-input v-model="testTextarea2"
        type="textarea"
        cols='100px'
        rows='200px'></bc-input>
    </div>
    <div class="show-card">
      <bc-select @change="selectChange1">
        <bc-option v-for="item in selectOptions1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled">
        </bc-option>
      </bc-select>
      <bc-select domPortal
        @change="selectChange2">
        <bc-option v-for="item in selectOptions2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled">
        </bc-option>
      </bc-select>
    </div>
    <div class="show-card popover-box">
      <div class="popover-wrap">
        <bc-popover>
          <div class="scroll-wrap">
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
          </div>
        </bc-popover>
      </div>
      <div class="popover-wrap">
        <bc-popover>
          <div class="scroll-wrap">
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
            <p>鼠标移上来出现tips</p>
          </div>
        </bc-popover>
      </div>
    </div>
    <div class="show-card">
      <div class="calendar-wrap">
        <bc-date-picker v-model="testCalendar"></bc-date-picker>
      </div>
    </div>
    <div class="show-card">
      <bc-checkbox :modelValue="testChecked"
        label="label"
        @change="handleCheckbox"></bc-checkbox>
      <br />
      <br />
      <bc-checkbox-group :data="checkboxDate"
        v-model="checkboxGroup"></bc-checkbox-group>
    </div>
    <div class="show-card">
      <bc-tree @on-toggle-expand="handleExpand"
        ref="tree1"
        @on-node-click="treeNodeClick"
        @on-check-change="checkboxChange"
        showCheckbox
        :data="treeData"></bc-tree>
      <br />
      <br />
    </div>
    <div id="test"></div>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data() {
      return {
        testInput1: '',
        testInput2: '',
        testInput3: '',
        testInput4: '',
        testInputNum: '',
        testTextarea1: '',
        testTextarea2: '',
        selectOptions1: [
          {
            value: '选项1',
            label: '黄金糕'
          },
          {
            value: '选项2',
            label: '双皮奶',
            disabled: true
          },
          {
            value: '选项3',
            label: '蚵仔煎'
          },
          {
            value: '选项4',
            label: '龙须面'
          },
          {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
        selectOptions2: [
          {
            value: '选项1',
            label: '黄金糕'
          },
          {
            value: '选项2',
            label: '双皮奶',
            disabled: true
          },
          {
            value: '选项3',
            label: '蚵仔煎'
          },
          {
            value: '选项4',
            label: '龙须面'
          },
          {
            value: '选项5',
            label: '北京烤鸭'
          }
        ],
        testCalendar: new Date(),
        checkboxDate: [
          { label: '选项1', value: 'a1' },
          { label: '选项2', value: 'a2', indeterminate: true },
          { label: '选项3', value: 'a3' },
          { label: '选项4', value: 'a4' },
          { label: '禁用', value: 'a5', disabled: true },
          { label: '勾选禁用', value: 'a6', disabled: true }
        ],
        testChecked: true,
        checkboxGroup: ['a1', 'a6'],
        treeData: [
          {
            label: 'yijiafsd我哦家',
            value: '1',
            indeterminate: true,
            children: [
              {
                label: 'erji市场',
                value: '1-1',
                checked: true,
                children: [
                  {
                    label: 'ffff石帆胜丰',
                    value: '1-1-1',
                    disabled: true,
                    children: [
                      {
                        label: 'ffff石帆胜丰122',
                        value: '1-1-1-1'
                      },
                      {
                        label: 'ffff石帆胜丰123',
                        value: '1-1-1-3'
                      }
                    ]
                  },
                  {
                    label: 'ffff石帆胜丰2233',
                    value: '1-1-2',
                    children: [
                      {
                        label: 'ffff石帆胜丰e5454',
                        value: '1-1-2-1'
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            label: 'yijiafsd我哦家',
            value: '1',
            indeterminate: true
          }
        ]
      };
    },
    methods: {
      selectChange1(val) {
        console.log(val);
      },
      selectChange2(val) {
        console.log(val);
      },
      checkboxChange(data, curr) {
        console.log('checked', data);
        console.log('current', curr);
      },
      treeNodeClick(node) {
        console.log('click', node);
        setTimeout(() => {
          const children = [
            {
              label: 'erji市场4545',
              value: '1-1333',
              checked: true
            }
          ];
          this.$set(this.treeData[1], 'children', children);
          console.log(this.treeData);
        }, 2000);
      },
      handleExpand(node) {
        console.log('expand', node);
      },
      handleCheckbox(val) {
        this.testChecked = val;
        console.log('testChecked', this.testChecked);
        console.log('single', val);
      },
      toToast() {
        console.log(1111, this);
        // this.$toast('sdsdsdsds');
        let bbb = this.$toast('sdsdsdsds');
        console.log(999, bbb);
      }
    }
  };
</script>

<style scoped>
  .home {
    overflow: hidden;
  }
  .home > .show-card {
    margin: 20px;
    padding: 10px;
    border: 1px solid #eee;
  }
  .popover-box {
    overflow: hidden;
  }
  .popover-wrap {
    margin-right: 60px;
    float: left;
  }
  .calendar-wrap {
    height: 140px;
  }
</style>
